<template>
  <div id="tmpl">
      <mt-swipe :auto="2000">
          <mt-swipe-item v-for="(item,index) in list" :key="index">
            <img :src="item.img" alt="">
          </mt-swipe-item>
      </mt-swipe>
      <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/news/newslist">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">新闻资讯</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/photo/photolist">
		                    <span class="mui-icon mui-icon-email"></span>
		                    <div class="mui-media-body">图片分享</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">商品购买</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">留言反馈</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">视频专区</div></router-link></li>
		        </ul> 
		</div>
  </div>
</template>
<script>
import {Toast} from "mint-ui"
    export default{
      data(){
        return{
          list:[],
        }
      },
      created(){
        this.getimg();
      },
      methods:{
        getimg(){
          var url="/api/getlunbo";
          /* this.$http.get(url).then(res=>{ //用vue-router是url要求全称如www.xxx/api/getnewslist
            console.log(res)
            var data=res.body;
            if(data.status!=0){
              Toast(data.message);
              return 
            }
            this.list=data.message;
          }) */
          //用axios请求
          this.$axios.get(url).then(res=>{
            console.log(res);
            var data=res.data;
            if(data.status!=0){
              Toast(data.message);
              return 
            }
            this.list=data.message;
          })
        }
      }
    }
</script>
<style scoped  lang="less"> 
  .mint-swipe{
    height: 300px;
     .mint-swipe-items-wrap img{
      width: 100%;
    }
  }
 .mui-grid-view.mui-grid-9{
   background-color: #fff;
   margin-top: 0;
   border: 0;
   .mui-table-view-cell{
     border: 0;
   }
   .mui-icon-home:before,
   .mui-icon-email:before,
   .mui-icon-chatbubble:before,
   .mui-icon-location:before,
   .mui-icon-search:before{
     content: '';
     display: inline-block;
     width: 50px;
     height: 50px;
     background-repeat: round; 
   }
   .mui-icon-home:before{
     background-image: url("../../static/imgs/1.png");
   }
   .mui-icon-email:before{
     background-image: url("../../static/imgs/2.png");
   }
   .mui-icon-chatbubble:before{
     background-image: url("../../static/imgs/3.png");
   }
   .mui-icon-location:before{
     background-image: url("../../static/imgs/4.png");
   }
   .mui-icon-search:before{
     background-image: url("../../static/imgs/5.png");
   }
 }
</style>

